<template>
  <div class="table-land-view">
    <vxe-list height="76vh" style="border:1px solid #ddd;" :data="tableData" :scroll-y="{enabled: true}">
      <template #default="{ items }">
        <div style="display: flex;padding:10px;position: relative;border-bottom:1px solid #eee;"
             v-for="row in items"
             :key="row.farmLandId"
             :class="{'selected':row.farmLandId == dropFarmLandId}">
          <div class="imgBox">
            <div class="image-view">
              <Image
                :list="[`${urlImage}/lngis/farm/common/static/${row.picSource}`]"
                :url="`${urlImage}/lngis/farm/common/static/${row.pic}`" />
            </div>
            <div class="tips-icon">{{ row.farmLandNo }}</div>
          </div>
          <div class="right-view" @click="setMapData(row)">
            <div class="title">
              <span class="name" :title="row.farmLandName">
                {{ row.farmLandName }} 
              </span>
            </div>
            <div class="tag-view">
              <div class="tag-text">
                {{ row.tagsName || '暂无标签' }}
              </div>
              <div class="size">
                {{ Number(row.mapAreaSize || 0).toFixed(1) }}亩
              </div>
            </div>
            <div class="corpname"> 
              {{ row.cropName }},{{ row.cropSeriesName }}
            </div>
          </div>
          <vxe-icon v-if="showDel" 
               name="delete" 
              @click="delCell(row)" 
              class="btn-delete" 
              status="danger"
              title="移除"></vxe-icon>
        </div>
      </template>
    </vxe-list>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue"
import Image from '@/components/custom/image.vue'
const urlImage = ref(import.meta.env.VITE_BASE_PATH)
const emit = defineEmits(['page-change', 'onClick', 'onDelete'])
const props = defineProps({
  tableData: {
    type: Array,
    default: []
  },
  pageInfo: {
    type: Object,
    default: {}
  },
  showDel: {
    type: Boolean,
    default: true
  }
})

const dropFarmLandId = ref('')
const setMapData = (row) => {
  dropFarmLandId.value = row.farmLandId
  emit('onClick', row)
}

const delCell = (row) => {
  emit('onDelete', {farmLandId:row.farmLandId})
}
                                                                                                                                                                                                                                                                                                                                                                   
onMounted(()=>{

})

</script>
<style>
.table-land-view .vxe-body--column {
  padding: 0 !important;
}

.table-land-view .vxe-table--render-default .vxe-cell {
  padding: 0;
}

.table-land-view .vxe-pager .vxe-pager--wrapper {
  margin: 0 auto;
  flex-grow: 0;
}
</style>
<style lang="scss" scoped>
.table-land-view {
  height: calc(100vh - 215px);
  padding: 0;

  .imgBox {
    position: relative;
    width: 92px;
    height: 78px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    border-radius: 3px;
    flex-shrink: 0;

    .image-view {
      width: 92px;
      height: 78px;
    }

    .tips-icon {
      position: absolute;
      left: 0;
      top: 0;
      width: 60px;
      height: 30px;
      background: url();
      background-repeat: no-repeat;
      background-position: inherit;
      display: flex;
      justify-content: left;
      font-size: 12px;
      padding: 1px 2px;
      color: #fff;
    }
  }

  .right-view {
    padding-left: 10px;
    cursor: pointer;
  }

  .title {
    display: flex;
    font-size: 14px;
    overflow: hidden;
    width: 150px;

    .name {
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      font-weight: 500;
      flex-shrink: 0;
      width: 0;
      font-size: 15px;
      color: #333;
      font-weight: bold;
    }

    .iocnbtn {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
  }

  .tipsbox {
    display: flex;

    span {
      background: #FFF5E5;
      border-radius: 2px;
      height: 26px;
      padding: 0 8px;
      font-size: 14px;
    }
  }

  .tag-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-right: 10px;

    .tag-text {
      font-size: 12px;
      background-color: #eee;
      padding: 2px 5px;
    }

    .size {
      font-weight: 400;
      color: #999999;
      font-size: 14px;
    }
  }

  .corpname {
    color: #ff9c00;
    font-size: 13px;
    padding-top: 15px;
  }

  .btn-delete {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 16px;
    font-weight: bold;
    z-index: 99;
    cursor: pointer;
  }

  .selected {
    background-color: #EBF9F4;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 100%;
      background-color: #04AE70;
      z-index: 9;
    }
  }
}
</style>
